<template>
    <div class="homePage" style="padding-top: 59px;">
        <div class="user_box u_bg_1 text-center">
            <img v-if="userinfo.u_head_portrait" :src="userinfo.u_head_portrait" class="displayB centerauto borderRadius" width="100" height="100" alt="">
            <img v-else src="../../assets/images/userPic.png" class="displayB centerauto borderRadius" width="100" height="100" alt="">
            <p class="font_20 bolds user_info_tit">{{userinfo.u_nickname}}</p>
            <span v-html="(userinfo.pName ? userinfo.pName : '') + (userinfo.cName?'-':'') + (userinfo.cName ? userinfo.cName : '')"></span>
            <div class="user_info_icons">
                <img v-if="userinfo.authentication == 1" src="../../assets/images/cert.png" :title="((userinfo.u_type == 1) ? '个人': '企业') + '已认证'" class="cert">
                <img v-if="userinfo.authentication == 2" src="../../assets/images/cert_non.png" :title="((userinfo.u_type == 1) ? '个人': '企业') + '未认证'" class="cert">
                <img v-if="userinfo.u_email != ''" src="../../assets/images/emails.png" title="邮箱已认证" class="emails">
                <img v-if="userinfo.u_email == ''" src="../../assets/images/email_non.png" title="邮箱未认证" class="emails">
                <img v-if="userinfo.u_phone != ''" src="../../assets/images/mobile.png" title="手机已认证" class="mobile">
                <img v-if="userinfo.u_phone == ''" src="../../assets/images/mobile_non.png" title="手机已认证" class="mobile">
            </div>
        </div>

        <div class="user_tab_link white_bg text-center">
            <span v-for="(item,index) in tabData" :key="index" :class="(activeInd == index) ? 'tab_link_active':''" @click="tabChange(index)">{{item}}</span>
        </div>
        <div class="mtb_large" style="min-height: 312px;">
            <div class="w centerauto">
                <el-row :gutter="20">
                    <el-col :span="18">
                        <!-- 首页 -->
                        <div v-show="activeInd == 0">
                            <div class="panel">
                                <p class="item_title">关于我</p>
                                <p class="minh_50 padding_16">{{infoData.about}}</p>
                            </div>
                            <div class="mtb_large panel">
                                <p class="item_title">项目案例</p>
                                <div class="minh_50 padding_16">
                                    <div class="case_item" v-for="(item,index) in infoData.case" :key="index">
                                        <p class="font_15 bolds mb_mini">{{item.cp_name}}</p>
                                        <div class="case_item_row">
                                            <span class="mr_8">项目周期：</span>
                                            <span>{{item.cp_cycle | cycleFilter}}</span>
                                            <span class="split">|</span>
                                            <span class="mr_8">团队规模：</span>
                                            <span>{{item.scale | scaleFilter}}</span>
                                            <span class="split">|</span>
                                            <span class="mr_8">我的角色：</span>
                                            <span>{{item.cp_role_name}}</span>
                                        </div>
                                        <div class="case_item_row">
                                            <span class="mr_8">应用技术：</span>
                                            <span>{{item.cp_technology_name}}</span>
                                        </div>
                                        <div class="case_item_row">
                                            <span class="mr_8">项目简介：</span>
                                            <span style="max-width: 743px;display: inline-block;vertical-align: text-top;" v-html="item.cp_content"></span>
                                        </div>
                                        <div class="case_item_row">
                                            <span class="mr_8">演示地址：</span>
                                            <a :href="item.cp_look_address" target="_blank" style="color: rgb(32, 147, 255);">{{item.cp_look_address}}</a>
                                        </div>
                                        <div class="case_item_row">
                                            <span class="mr_8">项目截图：</span>
                                            <span style="max-width: 743px;display: inline-block;vertical-align: text-top;">
                                                <img v-for="(pic,ind) in item.cp_photo" :key="ind" :src="pic" width="80" height="80" style="margin-right: 16px;padding: 5px;border: 1px solid rgb(204, 204, 204);" />
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 项目案例 -->
                        <div v-show="activeInd == 1">
                            <div class="panel">
                                <p class="item_title">项目案例</p>
                                <div class="padding_16" style="min-height: 327px;">
                                    <div v-for="(item,index) in infoData.case" :key="index" style="line-height: 30px;">
                                        <p class="case_item_title">{{item.cp_name}}</p>
                                        <div class="case_item_row tag">
                                            <span class="p_case_item_l">项目周期：{{item.cp_cycle | cycleFilter}}</span>
                                            <span>{{item.cp_role_name}}</span>
                                        </div>
                                        <div class="case_item_row">
                                            <span class="mr_8">应用技术：</span>{{item.cp_technology_name}}
                                        </div>
                                        <div class="case_item_row">
                                            <span class="mr_8">应用地址：</span>{{item.cp_look_address}}
                                        </div>
                                        <div class="case_item_row">
                                            <span class="mr_8">项目介绍：</span>
                                            <span v-html="item.cp_content"></span>
                                        </div>
                                        <div class="case_item_row">
                                            <span class="mr_8">项目截图：</span>
                                            <img v-for="(pic,ind) in item.cp_photo" :key="ind" :src="pic" width="80" height="80" style="margin-right: 16px;padding: 5px;border: 1px solid rgb(204, 204, 204);vertical-align: text-top;" />
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="panel border_top_blue">
                            <p class="item_title">我擅长的</p>
                            <div class="padding_16 minh_50">
                                <div class="skill_row">
                                    <p class="skill_label">岗位</p>
                                    <p class="skill_item">{{skillinfo.si_post}}</p>
                                </div>
                                <div class="skill_row">
                                    <p class="skill_label">应用类型</p>
                                    <p class="skill_item">{{skillinfo.si_application_type}}</p>
                                </div>
                                <div class="skill_row">
                                    <p class="skill_label">开发语言</p>
                                    <p class="skill_item">{{skillinfo.si_deve_language}}</p>
                                </div>
                                <div class="skill_row">
                                    <p class="skill_label">开发技能</p>
                                    <p class="skill_item">{{skillinfo.si_deve_skill}}</p>
                                </div>
                                <div class="skill_row">
                                    <p class="skill_label">中间件</p>
                                    <p class="skill_item">{{skillinfo.si_product}}</p>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>


    </div>
</template>
<script>
    
    import '../../assets/css/main.css'
    import '../../assets/css/projects.css'
    import '../../assets/css/ucenter.css'
    export default {
        data(){
            return{
                infoData: {},
                userinfo: {},
                skillinfo: {},
                tabData: ['首页','项目案例'],
                activeInd: 0,  //tab切换选中项
            }
        },
        filters: {
            cycleFilter: function(value){
                var val = '';
                if(value == 1){
                    val = '10天以下';
                }else if(value == 2){
                    val = '10-30天';
                }else if(value == 3){
                    val = '1-3个月';
                }else if(value == 4){
                    val = '3-6个月';
                }else if(value == 5){
                    val = '6-12个月';
                }else if(value == 6){
                    val = '一年及以上';
                }
                return val;
            },
            scaleFilter: function(value){
                var val = '';
                if(value == 1){
                    val = '20人以下';
                }else if(value == 2){
                    val = '20-99人';
                }else if(value == 3){
                    val = '100-499人';
                }else if(value == 4){
                    val = '500-999人';
                }else if(value == 5){
                    val = '1000-9999人 ';
                }else if(value == 6){
                    val = '10000人以上';
                }
                return val;
            },
        },
        methods: {
            init(){
                var _this = this;
                // 用户信息
                this.$httpGet('/api/index/Project/getUserInfoByUid',{'u_id': _this.$route.query.id}).then(response => {

                    if(response.code == 200){

                        _this.infoData = response.msg;
                        _this.userinfo = response.msg.info;
                        _this.skillinfo = response.msg.skill;
                        for(var i=0;i<response.msg.case.length;i++){
                            _this.infoData.case[i].cp_content = _this.escapeStringHTML(response.msg.case[i].cp_content);
                        }
                        
                    }

                });
            },
            //tab切换
            tabChange(ind){
                this.activeInd = ind;
            },
            //解析编辑器内容
            escapeStringHTML(str) {
                str = str.replace(/&amp;/g,'&');
                str = str.replace(/&lt;/g,'<');
                str = str.replace(/&gt;/g,'>');
                str = str.replace(/&quot;/g,'"');
                return str;
            },
        },
        mounted(){
            this.init();
        },
    }
</script>